 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";

withDefaults(defineProps<{
  align?:'start'|'center'|'end'
 }>(),{
  align:'center'
 })
 
 const content = ref<HTMLDivElement>();
 
 const textDom = ref<HTMLParagraphElement>();
 
 const obs = new ResizeObserver(() => {
   adjustFontSize(content.value!);
 });
 
 function adjustFontSize(dom: HTMLElement) {
   const container = dom;
   let fontSize = parseFloat(
     window.getComputedStyle(container, null).getPropertyValue("font-size")
   );
   textDom.value!.style.fontSize = fontSize + 'px'
   while (
     container.scrollHeight > container.offsetHeight ||
     container.scrollWidth > container.offsetWidth
   ) {
     fontSize -= 0.1;
     textDom.value!.style.fontSize = fontSize + "px";
   }
 }
 onMounted(() => {
   obs.observe(content.value!);
   obs.observe(textDom.value!);
   adjustFontSize(content.value!);
 });
 onUnmounted(() => {
   obs.disconnect();
 });
 </script>
 
 <template>
   <div class="pm-text-box" ref="content">
     <p ref="textDom">
       <slot></slot>
     </p>
   </div>
 </template>
 
 <style lang="less" scoped>
 .pm-text-box {
   display: flex;
   align-items: center;
   justify-content: v-bind('align');
   color: var(--pm-el-text-color);
   height: 100%;
   width: 100%;
   font-size: 2rem;
   position: relative;
   // box-sizing: border-box;
   // word-wrap: break-word;
   // overflow-wrap: break-word;
   // word-break: break-all;
   >p{
     position: absolute;
     line-height:normal ;
     white-space: normal;
     // overflow-wrap: break-word;
     // word-break: break-all;
     text-align: center;
   }
 }
 </style>
 